<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">

if(typeof Object.create !== 'function'){
Object.create = function(o){
var F = function(){};
F.prototype = o;
return new F();
};
}

var ponto = {x:0,y:0};

var pontos = new Array();
var pontosX = new Array();
var pontosY = new Array();

function desenha(e){
var pontoVariavel = Object.create(ponto);
pontoVariavel.x = e.pageX;
pontoVariavel.y = e.pageY;
pontos.push(pontoVariavel);
//$('#mostra').append("x" + e.pageX + " y" + e.pageY + " - ");
pontosX.push(e.pageX);
pontosY.push(e.pageY);
/* ctx.lineTo(e.pageX - offset, e.pageY - offset);
ctx.stroke(); */
}
function iniciaDesenho(e){
//inicia desenho
var pontoVariavel = Object.create(ponto);
pontoVariavel.x = e.pageX;
pontoVariavel.y = e.pageY;
pontos.push(pontoVariavel);
ctx.moveTo(e.pageX - offset, e.pageY - offset);
pontosX.push(e.pageX);
pontosY.push(e.pageY);

	isDown = true;
	}
	function terminaDesenho(e) {
		isDown = false;
		ctx.lineTo(e.pageX - offset, e.pageY - offset);
		ctx.stroke();
	}

	var offset = 10;
	var isDown = false;

	$(function() {
		$('#board').hover(function(e) {
			if (isDown) {
				desenha(e);
			}
		}, function() {

		});
		$('#board').mousemove(function(e) {
			if (isDown) {
				desenha(e);
			}
		});

		$('#board').mousedown(function(e) {
			//inicia desenho
			iniciaDesenho(e);
		}).mouseup(function(e) {
			//termina  desenho
			terminaDesenho(e);
		});

	});
</script>
<style type="text/css" media="all">
#board {
cursor: crosshair;
width: 300px;
height: 300px;
border: 1px solid #bfbfbf;
}
</style>
</head>
<body>

<canvas id="board" width="300" height="300"
style="border: 1px solid #d3d3d3;">



Your browser does not support the HTML5 canvas tag.



</canvas>



<script>
var c = document.getElementById("board");

var ctx = c.getContext("2d");
</script>

<div id="mostra"></div>

</body>
</html>